<template>
  <div class="image-cube">
    <div class="image-cube-wrap" :style="wrapStyle()">
      <div class="image-cube-item" v-for="l in compData.data.list" :key="l" :style="itemStyle(l)">
        <sa-image :url="l.src" radius="0" :style="imageStyle()" :suffix="null"></sa-image>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed } from 'vue';

  const props = defineProps(['compData']);

  const scale = computed(
    () =>
      (375 -
        props.compData.style.marginLeft -
        props.compData.style.marginRight -
        props.compData.style.padding * 2 +
        props.compData.data.space) /
      4,
  );

  function wrapStyle() {
    let height =
      props.compData.data.list.length > 0
        ? props.compData.data.list.reduce((prev, next) => {
            return prev.top > next.top || (prev.top == next.top && prev.height > next.height)
              ? prev
              : next;
          })
        : 30;
    return {
      margin: `-${props.compData.data.space / 2}px`,
      height: (height.top + height.height) * scale.value + 'px',
    };
  }

  function itemStyle(l) {
    return {
      width: l.width * scale.value + 'px',
      height: l.height * scale.value + 'px',
      top: l.top * scale.value + 'px',
      left: l.left * scale.value + 'px',
      padding: props.compData.data.space / 2 + 'px',
    };
  }

  function imageStyle() {
    return {
      width: '100%',
      height: '100%',
      'border-top-left-radius': props.compData.data.borderRadiusTop + 'px',
      'border-top-right-radius': props.compData.data.borderRadiusTop + 'px',
      'border-bottom-left-radius': props.compData.data.borderRadiusBottom + 'px',
      'border-bottom-right-radius': props.compData.data.borderRadiusBottom + 'px',
    };
  }
</script>

<style lang="scss" scoped>
  .image-cube {
    .image-cube-wrap {
      position: relative;
      .image-cube-item {
        position: absolute;
        overflow: hidden;
      }
    }
  }
</style>
